<template>
	<view>
		<my-nav-bar title="车辆标记">
			<view slot='right'>
				<view v-hasPermi="['control:vip:add']" @tap="goView(0, true)">新增</view>
			</view>
		</my-nav-bar>
		<uni-row class="demo-uni-row">
			<uni-col>
				<uni-search-bar placeholder="请输入车牌查询" @confirm="search" v-model="queryParams.carNo"
					@input="search">
				</uni-search-bar>
			</uni-col>
		</uni-row>
		<uni-swipe-action>
			<scroll-view style="height: calc(100vh - 90rpx - 110rpx);" refresher-enabled :refresher-triggered='isPull'
				@refresherrefresh='refresh' scroll-y="true" @scrolltolower="lower">
				<uni-list>
					<view v-for="item in tableList" :key="item.id">
						<uni-swipe-action-item :auto-close="false">
							<uni-list-item :title="item.carNo" :note="getDate(item)" showArrow
								:rightText="selectDictLabel(projectTypeOptions,item.vipType)" badge-text="12">
							</uni-list-item>
							<template v-slot:right>
								<view class="gate-button bg-blue" @click="goView(item.id)"
									v-hasPermi="['control:vip:edit']">编辑</view>
							</template>
						</uni-swipe-action-item>
					</view>
					<view style="border-top: 1px solid #f1f1f1;">
						<uni-load-more :status="status" />
					</view>
				</uni-list>
			</scroll-view>

		</uni-swipe-action>
	</view>
</template>

<script>
	import {
		listVip
	} from "@/api/control/vip.js";
	import {
		getDicts
	} from "@/api/system/dict/data"
	import myNavBar from '@/components/my-nav-bar/index'
	export default {
		components: {
			myNavBar
		},
		data() {
			return {
				loading: false,
				isPull: false,
				queryParams: {
					carNo: undefined,
					pageSize: 20,
					pageNum: 1,
				},
				total: 0,
				tableList: [],
				projectTypeOptions: []
			}
		},
		onShow() {
			this.search()
			getDicts('vip_type').then(res => {
				this.projectTypeOptions = res.data
			})
		},
		computed: {
			role() {
				let r = this.$store.getters.roles || []
				return r.find(f => f == 'admin')
			},
			status() {
				let txt = 'more'
				if (this.loading) return 'loading'
				if (this.total <= this.tableList.length) return 'no-more'
				return txt
			}
		},
		methods: {
			cancel(e) {
				this.queryParams.carNo = e.value
			},
			goView(id, isEdit = false) {
				this.$tab.navigateTo("view?id=" + id + "&isEdit=" + isEdit)
			},
			getDate(data) {
				if (data.vipType == 'temporary') {
					return data.startDate + ' 至 ' + data.endDate
				}
				return ''
			},
			lower() {
				if (this.total <= this.tableList.length) return
				this.queryParams.pageNum++
				this.getList()
			},
			search() {
				this.queryParams.pageNum = 1
				this.total = 0
				this.tableList = []
				this.getList()
			},
			refresh() {
				this.isPull = true
				this.search()
			},
			getList() {
				this.loading = true;
				listVip(this.queryParams).then(response => {
					this.tableList = [...this.tableList, ...response.rows];
					this.total = response.total;
					this.loading = false;
					this.isPull = false;
				})
			},
		}
	}
</script>

<style scoped>
	.demo-uni-row{
		background-color: #3c96f3;
	}
	.gate-button {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
</style>